<mat-sidenav-container [class.myapp-dark-theme]="darkTheme" [class.myapp-light-theme]="!darkTheme">
  <mat-sidenav #sidenav mode="over">
    <app-sidebar (navClick)="sidenav.toggle()"></app-sidebar>
  </mat-sidenav>
  <div class="site">
    <header>
      <app-header (toggle)="sidenav.toggle()" (toggleDarkTheme)="switchTheme($event)"></app-header>
    </header>
    <main>
      <router-outlet></router-outlet>
    </main>
    <footer>
      <app-footer></app-footer>
    </footer>
  </div>
</mat-sidenav-container>

<!-- <mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened>Drawer content</mat-drawer>
  <mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container> -->
